<template>
  <div class="msite">
    <!-- 头部栏 -->
    <HeaderTop title="金水区 文化路俭学街地铁站">
      <router-link to="/search" slot="left">
        <span class="header-search">
          <i class="iconfont icon-search"></i>
        </span>
      </router-link>

      <router-link to="/login" slot="right">
        <span class="header-login">登录 | 注册</span>
      </router-link>
    </HeaderTop>

    <!-- 食品分类轮播图 -->
    <div class="msite-nav">
      <div class="swiper-container" v-if="goods.length">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <a href="" class="food-category">
              <img src="./images/nav/1.jpg" alt="" />
              <span>营养早餐</span>
            </a>
            <a href="" class="food-category">
              <img src="./images/nav/2.jpg" alt="" />
              <span>咖喱丼饭</span>
            </a>
            <a href="" class="food-category">
              <img src="./images/nav/3.jpg" alt="" />
              <span>药品急送</span>
            </a>
            <a href="" class="food-category">
              <img src="./images/nav/4.jpg" alt="" />
              <span>超市速达</span>
            </a>
            <a href="" class="food-category">
              <img src="./images/nav/5.jpg" alt="" />
              <span>新鲜蔬果</span>
            </a>
            <a href="" class="food-category">
              <img src="./images/nav/6.jpg" alt="" />
              <span>甜品茶点</span>
            </a>
            <a href="" class="food-category">
              <img src="./images/nav/7.jpg" alt="" />
              <span>下午茶</span>
            </a>
            <a href="" class="food-category">
              <img src="./images/nav/8.jpg" alt="" />
              <span>格调小食</span>
            </a>
          </div>
          <div class="swiper-slide">
            <a href="" class="food-category">
              <img src="./images/nav/1.jpg" alt="" />
              <span>营养早餐</span>
            </a>
            <a href="" class="food-category">
              <img src="./images/nav/2.jpg" alt="" />
              <span>咖喱丼饭</span>
            </a>
            <a href="" class="food-category">
              <img src="./images/nav/3.jpg" alt="" />
              <span>药品急送</span>
            </a>
            <a href="" class="food-category">
              <img src="./images/nav/4.jpg" alt="" />
              <span>超市速达</span>
            </a>
            <a href="" class="food-category">
              <img src="./images/nav/5.jpg" alt="" />
              <span>新鲜蔬果</span>
            </a>
            <a href="" class="food-category">
              <img src="./images/nav/6.jpg" alt="" />
              <span>甜品茶点</span>
            </a>
            <a href="" class="food-category">
              <img src="./images/nav/7.jpg" alt="" />
              <span>下午茶</span>
            </a>
            <a href="" class="food-category">
              <img src="./images/nav/8.jpg" alt="" />
              <span>格调小食</span>
            </a>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>

      <!-- 骨架屏 -->
      <img src="./images/msite_back.svg" class="skeleton" v-else />
    </div>

    <!-- 分隔条 -->
    <div class="separation"></div>

    <!-- 附近商家 -->
    <div class="nearby-shops">
      <div class="shop-list-header">
        <i class="iconfont icon-xuanxiang"></i>
        <span>附近商家</span>
      </div>

      <ShopList></ShopList>
    </div>
  </div>
</template>

<script>
import HeaderTop from "../../components/HeaderTop/HeaderTop"
import ShopList from "../../components/ShopList/ShopList"
import { mapState } from "vuex"

// 引入swiper和swiper.css实现轮播图
import Swiper from "swiper/js/swiper.js"
import "swiper/css/swiper.min.css"

export default {
  mounted() {
    this.$store.dispatch("getShopGoods")
  },
  /* 在updated中创建轮播图的原因:
      为了展示骨架屏, 把轮播图的展示用v-if和一个不想关的数据food绑定在了一起.
      只有异步获得了mock提供的food数据后, 轮播图才展示, 这样就给了骨架屏一个展示的时间
      但是food是异步获取的, 必须在food获取之后再去创建Swiper, 所以在updated中
  */

  updated() {
    var mySwiper = new Swiper(".swiper-container", {
      loop: true, // 循环

      // 页器
      pagination: {
        el: ".swiper-pagination",
      },
      observer: true,
      observeParents: true,
    })
  },
  computed: {
    ...mapState(["goods"]),
  },
  components: { HeaderTop, ShopList },
}
</script>

<style lang="less" scoped>
@import "../../common/style/mixin.less";
.msite {
  height: 100vh;
  overflow: scroll;

  //  firefox中隐藏滚动条
  scrollbar-width: none;
  // chrome中隐藏滚动条
  &::-webkit-scrollbar {
    width: 0;
  }
}
.msite-nav {
  height: 20rem;
  margin-top: 4.5rem;
  background-color: #fff;
  .swiper-pagination {
    position: relative;
    top: -2rem;
  }
  .swiper-slide {
    display: flex;
    flex-wrap: wrap;
    height: 20rem;
    .food-category {
      flex: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        width: 5rem;
        height: 5rem;
        margin-bottom: 0.9rem;
      }
      span {
        font-size: 1.3rem;
        color: #666666;
      }
    }
  }
  .skeleton {
    margin-top: 1rem;
  }
}

.separation {
  .bottom-border-1px(#e4e4e4);
  .top-border-1px(#e4e4e4);
  width: 100%;
  height: 1.2rem;
}

.nearby-shops {
  background-color: #fff;
  .shop-list-header {
    height: 3rem;
    padding: 1rem 1rem 0;
    i {
      font-size: 1.6rem;
      color: #161616;
      margin-right: 1rem;
    }
    span {
      font-size: 1.4rem;
      color: #999999;
    }
  }
}
</style>
